<template>
    <div>
        <div class="firstPersonComponent">
            <div class="clip-tools_pan">
                第一人称漫游功能
            </div>
            <div class='clip-tools_body' id="storeyBody">
                <div class="button-group">
                    <button class="first-person-button" @click="startFirstPerson">开始</button>
                    <!-- <button class="first-person-button">暂停</button> -->
                    <button class="first-person-button" @click="endFirstPerson">结束</button>
                </div>
                <div class="movie-box">
                    <div class='movie-item' v-for="(item,index) in movieData" :key='index'>
                        <span class='movie-name'>{{ item.name }}</span>
                        <div class='first-person-tools'>
                            <div @click="playMovie(index)" class='first-person-tool'>
                                <d2-icon-svg  class="first-person-icon" name="play"/>
                            </div>
                            <div @click="exitMovie" class='first-person-tool'>
                                <d2-icon-svg  class="first-person-icon" name="stop"/>
                            </div>
                            <div class='first-person-tool' @click="deleteMovie(index)">
                                <d2-icon-svg  class="first-person-icon" name="delete"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-show="inputMovieName" class='movie-info-box'>
            <div class='movie-info-title'>创建漫游记录</div>
            <div class="movie-info-item">
                <label for="">请输入名称</label>
                <input type="text" id='firstPersonName'>
            </div>
            <div class="movie-info-item movie-info-btnGroup">
                <button class="first-person-button" @click="cancelCreateFirst">取消</button>
                <button class="first-person-button" @click="createFirstPerson">确认</button>
            </div>
        </div>
    </div>
</template>

<script>
    import * as xeogl from '@/libs/xeogl/base/xeogl.module'

    let movieId, movieFrames, isStart

    export default {
        name: "firstPerson",
        data: function () {
            return {
                inputMovieName: false
            }
        },
        props: [
            'currentTool',
            'movieData'
        ],
        methods: {
            startFirstPerson: function() {
                // 设置第一人称视角
                GOLOAlBAL_OPEOBJ.cameraControl.firstPerson = true;
                isStart = true;
                movieId = setInterval(function() {
                    if(!isStart) {
                        clearInterval(movieId);
                    }
                    let index;
                    if(!movieFrames) {
                        movieFrames = [];
                        index = 0;
                    } else {
                        index = movieFrames.length;
                    }
                    movieFrames.push({
                        t: index,
                        eye: [GOLOAlBAL_OPEOBJ.camera.eye[0], GOLOAlBAL_OPEOBJ.camera.eye[1], GOLOAlBAL_OPEOBJ.camera.eye[2]],
                        look: [GOLOAlBAL_OPEOBJ.camera.look[0], GOLOAlBAL_OPEOBJ.camera.look[1], GOLOAlBAL_OPEOBJ.camera.look[2]],
                        up: [GOLOAlBAL_OPEOBJ.camera.up[0], GOLOAlBAL_OPEOBJ.camera.up[1], GOLOAlBAL_OPEOBJ.camera.up[2]]
                    })
                }, 2000)

            },
            endFirstPerson: function() {
                isStart = false;
                if(movieId) {
                    clearInterval(movieId);
                }

                // 展示表单
                this.inputMovieName = true;
            },
            playMovie: function(index) {
                GOLOAlBAL_OPEOBJ.cameraPath.destroy();
                GOLOAlBAL_OPEOBJ.cameraPathAnimation.destroy();

                GOLOAlBAL_OPEOBJ.cameraPath = new xeogl.CameraPath({
                    frames: this.movieData[index].frames
                })

                GOLOAlBAL_OPEOBJ.cameraPathAnimation = new xeogl.CameraPathAnimation({
                    cameraPath : GOLOAlBAL_OPEOBJ.cameraPath,
                    playingRate: 0.5
                })

                GOLOAlBAL_OPEOBJ.cameraPathAnimation.play(0);
            },
            createFirstPerson: function() {
                let inputName = document.getElementById('firstPersonName').value;
                GOLOAlBAL_OPEOBJ.cameraControl.firstPerson = false;

                if(movieFrames && movieFrames.length > 0) {
                    this.movieData.push({frames: movieFrames, name: inputName});
                    movieFrames = null;
                }
                this.inputMovieName = false;
            },
            cancelCreateFirst: function() {
                GOLOAlBAL_OPEOBJ.cameraControl.firstPerson = false;
                movieFrames = null;
                this.inputMovieName = false;
            },
            exitMovie: function() {
                GOLOAlBAL_OPEOBJ.cameraPathAnimation.destroy();
                GOLOAlBAL_OPEOBJ.cameraPath.destroy();
            },
            deleteMovie: function(index) {
                this.movieData.splice(index, 1);
            },
        },
        watch:{
            currentTool:{
                handler(newValue, oldValue) {
                    console.log("ddd")
                    console.log(newValue);
                    console.log(oldValue);
                },
                deep: true
            }
        },
        beforeCreate(){

        },
        created(){

        },
        beforeMount(){

        },
        mounted(){

        },
        beforeUpdate(){

        },
        updated(){

        },
        beforeDestroy(){

        },
        destroyed(){

        }
    }
</script>

<style scoped>
    @import "./css/firstPerson.css";
</style>
